<!-- 进度弹窗 -->
<template>
  <px-dialog v-model="visible" class="equip-dialog-wrap" title="处理进度" width="1000px" @open="openDialog" @close="closeDialog">
    <px-table :data="approvalRecordDTOList" class="equip-table" size="small" max-height="380" border style="margin-bottom: 24px">
      <px-table-column type="index" label="序号" width="60" align="center" fixed="left" />
      <px-table-column
        v-for="(item, index) in processTableColumns"
        :key="index"
        :label="item.label"
        :min-width="item.minWidth"
        :align="item.align"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :fixed="item.fixed"
      >
        <template #default="scope">
          {{ scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-" }}
        </template>
      </px-table-column>
    </px-table>
    <div style="margin-top: 56px; text-align: right">
      <px-button @click="closeDialog">关闭</px-button>
    </div>
  </px-dialog>
</template>

<script setup lang="ts">
import { computed, reactive, ref, toRefs } from "vue";
import { approvalRecord } from "@/api/erc/spareParts";

// 调用父级-关闭弹窗、查询列表方法
const emits = defineEmits(["closeDialog"]);
// 父级传过来的值
const props = defineProps(["dialogVisible", "sparePartsId", "type"]);

const visible = computed(() => props.dialogVisible);
// 页面本身的值
const formRef = ref();
const state = reactive<any>({
  approvalRecordDTOList: [],
  processTableColumns: [
    { prop: "eventTypeDesc", label: "操作", minWidth: "180", showOverflowTooltip: true },
    { prop: "operateName", label: "操作人", minWidth: "180", showOverflowTooltip: true },
    { prop: "operateTime", label: "操作时间", minWidth: "180", showOverflowTooltip: true },
    { prop: "approvalOpinion", label: "备注", minWidth: "240", showOverflowTooltip: true }
  ]
});
const { approvalRecordDTOList, processTableColumns } = toRefs(state);

// 打开弹窗-获取详情
const openDialog = async () => {
  if (props.type === "wareHousing") {
    const params = {
      id: props.sparePartsId,
      busType: "in"
    };
    const data = await approvalRecord(params);
    approvalRecordDTOList.value = data || [];
  } else if (props.type === "outBound") {
    const params = {
      id: props.sparePartsId,
      busType: "out"
    };
    const data = await approvalRecord(params);
    approvalRecordDTOList.value = data || [];
  }
};
// 关闭弹窗
const closeDialog = () => {
  emits("closeDialog");
  approvalRecordDTOList.value = [];
};
</script>

<style lang="scss" scoped>
@import url("@/views/erc/scss/add-dialog.scss");
</style>
